<template>
    <div>
        <div class="mode_list" @click="$router.push('/shop')">
          <div class="mode_img">
            <img src="../../static/images/dp/90Q.jpg"></img>
          </div>
          <div class="mode_info">
              <h3>一只酸牛奶</h3>
              <span class="mode_desc">[成都等]酸奶紫米露系列3选1</span>
              <div class="mode_text">
                <span class="price">6元</span>
                <span>已售666</span>
              </div>
          </div>
        </div>
        <div class="mode_list">
          <div class="mode_img">
            <img src="../../static/images/dp/dp.jpg"></img>
          </div>
          <div class="mode_info">
              <h3>烤匠麻辣烤鱼</h3>
              <span class="mode_desc">[23店通用]包浆豆腐1份，提供免费WiFi</span>
              <div class="mode_text">
                <span class="price">19.9元</span>
                <span>已售6666</span>
              </div>
          </div>
        </div>
        <div class="getList" v-for="(item,index) in shops" :key="index">
            <div class="mode_list">
              <div class="mode_img">
                <img :src="baseImgUrl+item.image_path"></img>
              </div>
              <div class="mode_info">
                  <h3>{{item.name}}</h3>
                  <span class="mode_desc">{{item.description}}</span>
                  <div class="mode_star">
                    <Star :score="item.float_delivery_fee" :size="24"/>
                    <span class="delivery_mode">{{item.delivery_mode.text}}</span>
                  </div>
                  <div class="mode_text">
                    <a class="price">19.9元<span>/{{item.float_delivery_fee}}元起送</span></a>
                    <span>已售6666</span>
                  </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import Star from './Star.vue'
export default {
  components:{
    Star
  },
  data() {
    return {
      baseImgUrl:'https://elm.cangdu.org/img/'
    }
  },
  computed:{
    ...mapState(['shops'])
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "../assets/stylus/mixin.styl" 
    .mode_list
      bottom-border-1px(#e4e4e4)
      display flex
      padding 0.8rem 0
      .mode_img
        display flex
        justify-content center
        align-items center
        margin-right 0.5rem
        img
          width 5.3rem
      .mode_info
        flex 1
        display flex
        flex-direction column
        h3
          font-size 1rem
          font-weight 600
          margin-bottom 0.4rem
        .mode_desc
          flex 1
          color #ccc
          font-size 0.7rem
        .mode_star
          display flex
          justify-content space-between
          align-items center
          .delivery_mode 
            padding 0.1rem
            text-align center
            color #41B883
            border 1px solid #41B883
            border-radius 0.2rem
            margin 0.2rem 0
            font-size 0.6rem
        .mode_text
          display flex
          justify-content space-between
          font-size 0.6rem
          .price
            color #f5A100
            font-size 0.8rem
            font-weight 600
            span
              font-size 0.4rem
              font-weight 400    
          
</style>